import React from "react";
// import TestCalendar from './TestCalendar/Calendar'
import "./index.css";
import "./App.css";
import Space from "./Space";
// import { ConfigProvider } from "antd";
import { ConfigProvider } from "./Space/ConfigProvider";
// import { Space } from "antd";
// import Calendar from "./Calendar";
// import dayjs from "dayjs";
// import { IconAdd } from "./Icon/icons/IconAdd";
// import { IconEmail } from "./Icon/icons/IconEmail";
// import { createFromIconFont } from "./Icon/createFrontIconfont";

// const IconFont = createFromIconFont(
//   "//at.alicdn.com/t/c/font_4443338_a2wwqhorbk4.js"
// );

// export default function App() {
//   return (
//     <div>
//       <ConfigProvider space={{ size: 100 }}>
//         <Space direction="horizontal">
//           <div className="box"></div>
//           <div className="box"></div>
//           <div className="box"></div>
//         </Space>
//         <Space direction="vertical">
//           <div className="box"></div>
//           <div className="box"></div>
//           <div className="box"></div>
//         </Space>
//       </ConfigProvider>
//     </div>
//   );
// }

const App = () => (
  <ConfigProvider space={{ size: 20 }}>
    <Space direction="horizontal">
      <div className="box"></div>
      <div className="box"></div>
      <div className="box"></div>
    </Space>
    <Space direction="vertical">
      <div className="box"></div>
      <div className="box"></div>
      <div className="box"></div>
    </Space>
  </ConfigProvider>
  // return (
  /* 图标 icon */
  // <div style={{ padding: "50px" }}>
  // {/* <IconAdd size="40px"></IconAdd>
  // <IconEmail spin></IconEmail>
  // <IconEmail style={{color: 'blue', fontSize: '50px'}}></IconEmail> */}
  // <IconFont type="icon-shouye-zhihui" size="40px"></IconFont>
  // <IconFont type="icon-gerenzhongxin-zhihui" fill="blue" size="40px"></IconFont>
  // </div>
  /* 日历组件 - 简单 */
  // <TestCalendar />
  /* 日历组件 - 复杂 */
  // <Calendar
  //   value={dayjs("2023-11-08")}
  //   locale="en-US"
  //   onChange={(value) => {
  //     console.log(value.format('YYYY-MM-DD'));
  //   }}
  //   // className={"aaa"}
  //   // style={{ background: "yellow" }}
  //   // dateInnerContent={(value) => {
  //   //   return <div>
  //   //     <p style={{ background: 'yellowgreen', height: '30px' }}>{value.format('YYYY-MM-DD')}</p>
  //   //   </div>
  //   // }}
  //   // dateRender={(value) => {
  //   //   return <div>
  //   //     <p style={{ background: 'yellowgreen', height: '300px' }}>{value.format('YYYY-MM-DD')}</p>
  //   //   </div>
  //   // }}
  // />
);
export default App;
 